<template>
	<view>
		<view class="refund-cont">
			<view class="progress-line">
				<view class="info">
					<view class="item on">
						<view class="icon"><image src="../../static/icons/jewel/select.png"></image></view>
						<view class="name">申请退款</view>
						<view class="time">{{data.pay_time_text}}</view>
					</view>
					<view :class="data.status == 2||data.status == 1?'item on':'item'">
						<view class="icon">
							<image :src="data.status == 1||data.status == 2?'../../static/icons/jewel/select.png':'../../static/icons/jewel/select_mo.png'"></image>
						</view>
						<view class="name">审核中</view>
						<view class="time"></view>
					</view>
					<view :class="data.status == 2?'item on':'item'">
						<view class="icon">
							<image :src="data.status == 2?'../../static/icons/jewel/select.png':'../../static/icons/jewel/select_mo.png'"></image>
						</view>
						<view class="name">退款到账</view>
						<view class="time" v-if="data.status == 2">{{data.finishtime_text}}</view>
					</view>
				</view>
			</view>
			<view class="refund-prod">
				<view class="start-time">下单时间:2019-08-17 17:59</view>
				<view class="prod-info flex">
					<view class="pic"><image :src="data.photo"></image></view>
					<view class="info flex">
						<view class="left">
							<view class="name">康乃馨黄金项链吊坠</view>
							<view class="parameter">
								<view class="item"><text>颜色：</text><text>金色</text></view>
								<view class="item"><text>重量：</text><text>1.58g</text></view>
							</view>
						</view>
						<view class="right">
							<view class="money">￥1000</view><view class="num">x1</view>
						</view>
					</view>
				</view>
				<view class="money-cont flex"><text class="text">手续费</text><text class="money">￥100</text></view>
			</view>
			<view class="money-cont order-info flex">
				<text class="text">订单:62008623310202</text>
				<text class="money">共计:￥100100</text>
			</view>
			<view class="refund-total-bg"></view>
			<view class="refund-total flex">
				<text class="text">退款总金额</text>
				<text class="total">￥100100</text>
			</view>
		</view>
		
		<view class="m-loading" v-if="showLoading">
			<image src="../../static/images/loading.gif" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import henglang from '@/common/common.js';
	export default {
		data() {
			return {
				showLoading: false,
				data:{},
				payStatus:'',
				payPop: false,
				payList:[],
				order_no:'',
				member:''
			}
		},
		methods: {
			payBtn(){
				this.payPop = !this.payPop
			},
			pay(paytype){
				let that = this;
				that.payPop = false;
				that.showLoading = true;
				henglang.post('Payment/pay', {type:paytype,order_no:that.order_no}, true, function (res){
					that.showLoading = false;
					switch (paytype) {
					    case 'wxpay':
						case 'alipay':
							let pay_data = res.data.data;
					        uni.requestPayment({
					            provider: paytype,
					            orderInfo: pay_data.paydata,
								// #ifdef MP-WEIXIN
								nonceStr: pay_data.nonceStr,
								timeStamp: pay_data.timeStamp,
								package: pay_data.package,
								signType: pay_data.signType,
								paySign: pay_data.paySign,
								// #endif
					            success: (res) => {
					                henglang.showToast('支付成功', 1500);
									setTimeout(()=>{
										henglang.get('transfer_order/getOrderInfo',{order_no: pay_data.order_no,member:1},true,function(res){
											that.payStatus = 1
											that.data = res.data.data
											uni.setStorage({
												key: 'pay_again',
												data: true,
											});
										});
									},1500)
					            },
					            fail: (res) => {
					                henglang.showToast('支付失败');
									
					            },
								complete:(res)=>{
								}
					        })
					        break;
					}
				})
			}
		},
		onLoad(options) {
			let that = this
			that.showLoading = true
			that.payStatus = options.pay_status
			that.order_no = options.order_no
			that.member = options.member
			henglang.get('transfer_order/getOrderInfo',{order_no: options.order_no,member:options.member},true,function(res){
				that.showLoading = false
				that.data = res.data.data
			});
			henglang.get('Payment/payList', {}, true, function (res){
				that.payList = res.data.data;
			})
		}
	};
</script>

<style>
	page{
		background: #f8f8f8;
	}
	.flex{
		display: flex;
	}
	.progress-line .info{
		display: flex;
		justify-content: space-between;
		justify-content: center;
		position: relative;
		z-index: 1;
		margin-top: 50rpx;
		padding-bottom: 30rpx;
	}
	.progress-line .info:after{
		content: '';
		position: absolute;
		top: 17rpx;
		left: 50%;
		margin-left: -254rpx;
		width: 508rpx;
		height: 5rpx;
		background: #b2b2b2;
		z-index: -1;
	}
	.progress-line .info .item{
		text-align: center;
		flex: 1;
		position: relative;
		z-index: 10;
	}
	.progress-line .info .on .name{
		color: #e93a3a;
	}
	.progress-line .info .on .icon:after{
		content: '';
		position: absolute;
		right: 0rpx;
		top: 17rpx;
		width: 254rpx;
		height: 5rpx;
		background: #e93a3a;
		z-index: -10;
	}
	.progress-line .info .on:nth-child(1) .icon:after{
		height: 0rpx;
	}
	.progress-line .info .icon{
		position: relative;
		z-index: 2;
		width: 38rpx;
		height: 38rpx;
		margin: 0 auto;
		margin-bottom: 9rpx;
	}
	.progress-line .info .icon image{
		width: 38rpx;
		height: 38rpx;
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;
	}
	.progress-line .item .name{
		color: #b2b2b2;
		font-size: 28rpx;
		padding-bottom: 4rpx;
	}
	.progress-line .item .time{
		color: #999999;
		font-size: 26rpx;
		width: 200rpx;
		margin: 0 auto;
	}
	.refund-prod{
		background: #FFFFFF;
		padding: 0 36rpx;
		margin-bottom: 10rpx;
	}
	.refund-prod .start-time{
		font-size: 28rpx;
		color: #4d4d4d;
		height: 74rpx;
		line-height: 74rpx;
		border-bottom: 1px solid #e6e6e6;
	}
	.refund-prod .prod-info{
		padding: 26rpx 0;
		border-bottom: 1px solid #e6e6e6;
	}
	.refund-prod .prod-info .pic{
		border: 1px solid #cdcdcd;
		width: 144rpx;
		height: 144rpx;
		border-radius: 10rpx;
		margin-right: 23rpx;
	}
	.refund-prod .prod-info .pic image{
		width: 100%;
		height: 100%;
	}
	.refund-prod .prod-info .info{
		flex: 1;
		justify-content: space-between;
		padding-top: 12rpx;
	}
	.refund-prod .prod-info .info .name{
		color: #4c4c4c;
		font-size: 30rpx;
		line-height: 40rpx;
		max-height: 80rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 10rpx;
	}
	.refund-prod .prod-info .parameter .item{
		color: #808080;
		font-size: 26rpx;
	}
	.refund-prod .prod-info .right .money{
		color: #323232;
		font-size: 32rpx;
		text-align: right;
	}
	.refund-prod .prod-info .right .num{
		text-align: right;
		color: #666666;
		font-size: 30rpx;
	}
	.money-cont{
		justify-content: space-between;
		line-height: 70rpx;
	}
	.money-cont .text{
		color: #4d4d4d;
		font-size: 28rpx;
		width: 400rpx;
	}
	.money-cont .money{
		color: #333333;
		font-size: 32rpx;
	}
	.order-info{
		background: #FFFFFF;
		padding: 0 36rpx;
	}
	.refund-total-bg{
		height: 100rpx;
		width: 100%;
	}
	.refund-total{
		height: 100rpx;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 36rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		z-index: 10;
	}
	.refund-total .text{
		color: #4D4D4D;
		font-size: 32rpx;
	}
	.refund-total .total{
		color: #eb4c4c;
		font-size: 36rpx;
	}
</style>
